<!---保存，放大，缩小 -->
<div ng-controller="StencilController" ng-cloak="">
	<div class="subheader1 editor-toolbar" id="editor-header">
		<div class="btn-group">
			<div class="btn-toolbar pull-left" ng-controller="ToolbarController" ng-cloak >
				<button id="{{item.id}}" title="{{item.title | translate}}" ng-repeat="item in items" ng-switch
					on="item.type" class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"
					ng-disabled="item.type == 'separator' || item.enabled == false"
					ng-click="toolbarButtonClicked($index,dataArr1)">
					<i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip"
						title="{{item.title | translate}}"></i>
					
					<div class="toolbar-text">{{item.name | translate }}</div>
					<div ng-switch-when="separator" ng-class="item.cssClass"></div>
				</button>
			</div>
		</div>
		<!-- 右上角关闭按钮 -->
		<div class="btn-group pull-right" ng-show="!secondaryItems.length">
			<div class="btn-toolbar pull-right" ng-controller="ToolbarController">
<!--				<button title="{{item.title | translate}}" ng-repeat="item in secondaryItems" ng-switch on="item.type"-->
<!--					class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"-->
<!--					ng-disabled="item.type == 'separator'" ng-click="toolbarSecondaryButtonClicked($index)"-->
<!--					id="{{item.id}}">-->
<!--					<i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip"-->
<!--						title="{{item.title | translate}}"></i>-->
<!--					<div ng-switch-when="separator" ng-class="item.cssClass"></div>-->
<!--				</button>-->


<!--				<button title="{{item.title | translate}}" ng-repeat="item in secondaryItems" ng-switch on="item.type"-->
<!--						class="btn btn-inverse" ng-class="{'separator': item.type == 'separator'}"-->
<!--						ng-disabled="item.type == 'separator'" ng-click="toolbarSecondaryButtonClicked($index)"-->
<!--						id="{{item.id}}">-->
<!--					<i ng-switch-when="button" ng-class="item.cssClass" class="toolbar-button" data-toggle="tooltip"-->
<!--					   title="{{item.title | translate}}"></i>-->
<!--					<div ng-switch-when="separator" ng-class="item.cssClass"></div>-->
<!--				</button>-->
			</div>
		</div>
	</div>

<!--模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
<!--         <button type="button" class="close"data-dismiss="modal" aria-hidden="true">×</button>
 -->        <p class="modal-title text-danger" style='margin-top:10px'>
          <span class='glyphicon glyphicon-info-sign'></span>当前流程模型还未绑定表单模型，请先选择表单模型进行绑定!
        </p>
      </div>
      
      <div class="modal-body" style='height:50vh;overflow-y:auto'>
      	<div class="list-group" >
			  <button  type="button" ng-click='listChoose(item.id)' ng-repeat='item in formObj' class="list-group-item">{{item.formName}}</button>
		</div>
      </div>
      
      <div class="modal-footer">
        <button type="button"  class="btn btn-default" ng-click='submitList()'>确定</button>
      </div>
      
    </div>
  </div>
</div>
	<!-- 左边控制面板-->
	<div class="full">
		<div class="row row-no-gutter">
			<div id="paletteHelpWrapper" >
				<div class="stencils" id="paletteSection" >
					<div ng-if="stencilItemGroups.length > 1" >
						<div ng-repeat="group in stencilItemGroups">
							<ul ng-if="group.visible && group.items" class="stencil-group"
								ng-class="{collapsed:group.expanded, 'first': $first}">
								<!--节点面板-->
								<li ng-include="'editor-app/partials/stencil-item-template.html?version=6'" ></li>
							</ul>

							<div ng-if="!group.items" 
								ng-include="'editor-app/partials/root-stencil-item-template.html?version=6'">
									
							</div>
						</div>
					</div>
					<div ng-if="stencilItemGroups.length == 1">
						<ul class="stencil-group">
							<li ng-repeat="item in stencilItemGroups[0].paletteItems" class="stencil-item"
								id="{{item.id}}" title="{{item.description | translate}}" ng-model="draggedElement"
								data-drag="true" jqyoui-draggable="{onStart:'startDragCallback', onDrag:'dragCallback'}"
								data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity : 0.5}">
								<img ng-if="!item.customIcon"
									ng-src="editor-app/stencilsets/{{getStencilSetName()}}/icons/{{item.icon}}"
									width="16px;" height="16px;" /> <img ng-if="item.customIcon"
									ng-src="{{getImageUrl(item.icon)}}" width="16px;" height="16px;" />
								{{item.name | translate}}
							</li>
						</ul>
					</div>
				</div>
			</div>
		
			<div id="contentCanvasWrapper">
				<div id="canvasHelpWrapper" class="col-xs-11.5">
					<!--中间面板部分-->
					<div id="canvasSection" class="canvas-wrapper" ng-model="droppedElement" data-drop="true"
						data-jqyoui-options 
						jqyoui-droppable="{onDrop:'dropCallback',onOver: 'overCallback', onOut: 'outCallback'}">
						<div class="canvas-message" id="model-modified-date"></div>
						<!--点击画板上的控件时候的工具箱-->
						<div class="Oryx_button" id="delete-button"
							title="{{'BUTTON.ACTION.DELETE.TOOLTIP' | translate}}" ng-click="deleteShape()"
							style="display: none">
							<img src="editor-app/images/delete.png" />
						</div>
						<div class="Oryx_button" id="morph-button" title="{{'BUTTON.ACTION.MORPH.TOOLTIP' | translate}}"
							ng-click="morphShape()" style="display: none">
							<img src="editor-app/images/wrench.png"/>
						</div>						
						<div class="Oryx_button" id="edit-button" style="display: none" ng-click="editShape()">
							<img src="editor-app/images/pencil.png" />
						</div>
						<!--点击画板上的控件时候的工具箱box-->
						<div class="Oryx_button" ng-repeat="item in quickMenuItems" id="{{item.id}}"
							title="{{item.description}}" ng-click="quickAddItem(item.id)" ng-model="draggedElement"
							data-drag="true"
							jqyoui-draggable="{onStart:'startDragCallbackQuickMenu', onDrag:'dragCallbackQuickMenu'}"
							data-jqyoui-options="{revert: 'invalid', helper: 'clone', opacity : 0.5}"
							style="display: none" >
							<!--图片请求的src中的-->
							<img ng-src="editor-app/stencilsets/{{getStencilSetName()}}/icons/{{item.icon}}" />
						</div>
						<!--点击画板上的控件时候的工具箱结束-->
					</div>
				</div>
				<!-- 右边属性编辑区域 begin -->
				<div id="propertiesHelpWrapper" style='width:320px;border:1px solid red'>
					<div class="propertySection" id="propertySection"
						ng-class="{collapsed: propertyWindowState.collapsed}" style='width:320px'>
						<div class="selected-item-section" >
							<!-- begin -->
							<div class="selected-item-body" style='width:320px'>
								<div ng-repeat="group in selectedItem.propGroups | orderBy: 'order'">
						
									<div class="property-group">
										<div class="property-group-title" ng-click="group.expanded = !group.expanded">
											<span>{{ group.name | translate }}</span><!--基本属性标题-->
											<i ng-if="(group.name| translate)!='操作权限'" class="glyphicon glyphicon-chevron-right pull-right"
												ng-class="{'glyphicon-chevron-right pull-right': !group.expanded, 'glyphicon-chevron-down pull-right': group.expanded}"></i>
											<i ng-if="(group.name|translate)=='操作权限'" class="glyphicon glyphicon-chevron-right pull-right"
												ng-class="{'glyphicon-chevron-right pull-right': group.expanded, 'glyphicon-chevron-down pull-right': !group.expanded}"></i>
										</div>
										<div class="property-group-body" ng-class="{collapsed: (group.name| translate)=='操作权限'?group.expanded:!group.expanded}">
	<!-- 						<div ng-if="(group.name| translate)=='操作权限'" >
												<table class="table" cellspacing="0" cellpadding="0" >											
												    <thead>
												        <th> </th>
												        <th><input  type="checkbox" >可见</th>
												        <th><input type="checkbox" >可写</th>
												        <th><input type="checkbox" >必填</th>
												    </thead>
												<tbody >									 
											         <tr ng-repeat='item in group.properties[0].value'>
												       	<td>{{item.name}}</td>
												       	<td><input  type="checkbox"></td>
												       	<td><input  type="checkbox"></td>
												       	<td><input type="checkbox"></td>
												     </tr>
												      											       
												    </tbody>   
												</table>
											</div>  -->
											<div class="property-row" ng-repeat="property in group.properties"
												 ng-class="{'clear' : $index%2 == 0}" ng-click="propertyClicked(property)" ><!--折叠区展开的部分-->
												 
												<span class="title"
													ng-if="!property.hidden">{{property.title }}&nbsp;:</span><!--属性名称-->


												<span class="title-removed" ng-if="property.hidden">
													<i>{{property.title}}&nbsp;({{'PROPERTY.REMOVED'| translate}})&nbsp;:</i>
												</span>
												<span class="value" > <!--属性值-->
												
													<ng-include src="getPropertyTemplateUrl(property)"
														ng-if="!property.hasReadWriteMode">
													</ng-include><!--属性-->
													<ng-include src="getPropertyReadModeTemplateUrl(property)"
														ng-if="property.hasReadWriteMode && property.mode == 'read'">
													</ng-include><!--可读属性-->
													<ng-include src="getPropertyWriteModeTemplateUrl(property)"
														ng-if="property.hasReadWriteMode && property.mode == 'write'"><!--可写属性-->
													</ng-include>
												</span>
											</div>
											<!-- <ng-include src='./configuration/properties/form-properties-popup.html'>adsfadf</ng-include> -->
										</div>
											
									</div>	

								</div>

						</div>
					</div>
				</div>
				<!-- 属性编辑区域 end -->
			</div>
		</div>
	</div>
</div>
<!-- 												